<template>
<div>
    <div class="box1">
      <div class="father" @click="fatherclick">
    <!-- .stop阻止时间冒泡 -->
        <div class="son" @click.stop="sonclick">
        </div>
   </div>
   <!-- .prevent指令后缀。阻止默认行为 -->
   <a href="http://www.baidu.com" @click.prevent="linkClick"> 百度</a>
   <form action="#" method="get" @submit.prevent="submit">
        <input type="text" name="name" id="">
        <input type="submit" value="提交">
   </form>
</div>
<div class="box2">
    <!-- 按键修饰符 -->
    <input type="text" name="name"  @keyup.enter="submit"><br>
    <input type="text" name="name"  @keyup.down="down">
</div>
<div class="box3">
    <!-- 鼠标按键修饰符 -->
    <div @click.left="left"   > 左击触发事件</div>
</div>
</div>

</template>
<script>
export default {
    methods:{
    fatherclick(){
        console.log("点击father")
    },
    sonclick(){
        console.log("点击son")
    },
    linkClick(){
        console.log("点击百度")
    },
    submit(){
        console.log("submit")
    },
    down(){
        console.log("down")
    },
    left(){
        console.log("left")
    }
}
}


</script>

<style scoped>
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background:yellow;
    }
    .box3>div{
        width: 100px;
        height: 100px;
        background:rgb(43, 112, 185);
    }

</style>